<template>
  <i-dropdown trigger="custom" :visible="visible" placement="bottom-end">
    <label>作者：{{name}}</label>
    <i-button type="default" size="small" class="margin-left-10" @click="change">修改</i-button>
    <i-dropdown-menu slot="list" class="author-wrap">
      <i-form @submit.native.prevent="onSubmit()">
        <i-form-item label="工号">
          <i-input v-model="code">
            <i-button type="default" slot="append" @click="get">查询</i-button>
          </i-input>
        </i-form-item>
        <i-form-item class="margin-top-10" v-show="target.name">
          <span>姓名：{{target.name}}</span>
          <span class="margin-left-10">部门：{{target.department}}</span>
        </i-form-item>
        <i-form-item class="margin-top-10">
           <i-button type="primary" html-type="submit" :disabled="!target.name">确定</i-button>
           <i-button type="default" @click="cancel">取消</i-button>
        </i-form-item>
      </i-form>

    </i-dropdown-menu>
  </i-dropdown>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  props: ['value'],
  data() {
    return {
      id: null,
      name: '本人',
      code: '',
      target: {
        name: '',
        department: ''
      },
      visible: false
    }
  },
  methods: {
    ...mapActions({
      loadUser: 'loadUser'
    }),
    change() {
      this.visible = !this.visible
    },
    cancel() {
      this.visible = false
    },
    get() {
      if (!this.code) return
      let that = this
      this.loadUser({
        code: this.code,
        callback(user) {
          that.target.name = user.name
          that.target.department = user.department
          that.id = user.id
        }
      })
    },
    set(user) {
      this.id = user.id
      this.name = user.name
    },
    onSubmit() {
      if (!this.target.name) {
        this.get()
      } else {
        this.name = this.target.name
        this.$emit('update:value', this.id)
        this.visible = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.author-wrap {
  width: 200px;
  // height: 120px;
  text-align: left;
  padding: 5px 15px;
}
</style>
